<template>
     <div class="outPlaylist">
        <div class="text" v-if="value" >推荐歌单 <i class="el-icon-arrow-right"></i></div>
        <div class="recommended">
        <div class="playlist" @click="skipRouter(item)" v-for="(item,i) in Singles" :key="i">
        <img :src="item.picUrl" alt="" >
        <p>{{item.name}}</p>
         </div>
     </div>
      </div>
</template>

<script>
export default {
     props:{
       Singles:{
         type:Array,
         default:[]
       },
       value:{
         type:Boolean,
         defalut:false
       }
     },
     methods:{
       skipRouter(item){
         this.$router.push(`/MusicDetails?id=${item.id}`)
       }
     }
}
</script>

<style lang="less" scoped>
   .outPlaylist{
  margin-top:40px;
.text{
  font-size:20px;
  font-weight:600;  
  color:black;
  padding-bottom:20px;
  i{
    margin-left:8px;
    font-size:20px;
  }
}
  .recommended{
  width: 100%;
  height:500px;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  
   .playlist{
     width:18%;
     height:200px;
     
     img{
       width:100%;
       height:100%;
       border-radius:10px;
     }
   }
  }
  }

</style>